<div class="layui-card">

    <div class="layui-card-body">
        <div class="layui-form toolbar">
            搜索：<input id="menus-edit-search" class="layui-input search-input" type="text" placeholder="输入工位关键字"/>&emsp;
            <div class="layui-inline layui-show-xs-block">
                <select id="sttype" name="enable" class="valid">
                    <option value="全部">全部类型</option>
                    <option value="工位">工位</option>
                    <option value="会议厅">会议厅</option>
                    <option value="路演厅">路演厅</option>
                </select>
            </div>
            <button id="menus-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table" id="station-table" lay-filter="menus-table"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="station-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--状态操作-->
<script type="text/html" id="switchTpl">
    <!-- 这里的checked的状态只是演示 -->
    <input type="checkbox" name="enable" value="{{d.statid}}" lay-skin="switch" lay-text="启用|停用" lay-filter="station"
           {{d.enable=='2'?'checked':''}}>
</script>
<!--状态操作-->
<script type="text/html" id="switchTpl1">
    <!-- 这里的checked的状态只是演示 -->
    <input type="checkbox" name="examin" value="{{d.statid}}" lay-skin="switch" lay-text="打回|通过" lay-filter="station1"
           {{d.examin=='2'?'checked':''}}>
</script>
<script>
    layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var admin = layui.admin;
        var config = layui.config;
        var form = layui.form;
        // 渲染表格
        function renderTable(){table.render({
            elem: '#station-table',
            url: config.base_server + 'api-administrators/station/findAll',
            where: {
                access_token: config.getToken().access_token
            },
            parseData: function (res) {//数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.data.count,
                    "data": res.data.stationList
                }
            },
            page: true,
            cols: [[
                {type: 'numbers'},
                {field: 'stname', minWidth: 200, title: '工位名'},
                {field: 'prices', title: '价格'},
                {field: 'sttype', title: '工位类型'},
                {field: 'conten', title: '工位介绍'},
                {field: 'examin', width: 95, templet: '#switchTpl1', title: '工位审核'},
                {field: 'enable', width: 95, templet: '#switchTpl', title: '工位状态'},
                {templet: '#station-state', width: 120, align: 'center', title: '操作'}
            ]]
        });}
        renderTable();
        // 工具条点击事件
        table.on('tool(menus-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') {
                layer.confirm('确定删除此菜单吗？', function () {
                    layer.load(2);
                    admin.req('api-administrators/station/delete/'+data.statid, {access_token: config.getToken().access_token}, function (data) {
                        layer.closeAll('loading');
                        if (0 == data.code) {
                            layer.msg("删除成功！");
                            renderTable();
                        } else {
                            layer.msg("删除失败！");
                        }
                    }, 'post');

                });
            }
        });

        // 显示编辑弹窗
        var showEditModel = function (data) {
            // debugger;
            // if (data) {
            //     data.isMenu = data.isMenu.toString();
            //     data.hidden = data.hidden.toString();
            // }
            var title = data ? '修改工位' : '添加工位';
            admin.putTempData('t_menus', data);

            admin.popupCenter({
                title: title,
                path: 'pages/system/station_form.html',
                finish: function () {
                    renderTable();
                }
            });
        };

        //监听状态操作
        form.on('switch(station)', function (obj) {
            if (obj.othis[0].innerText == '启用') {
                $.ajax({
                    url: config.base_server + 'api-administrators/station/updateStatus',//地址：访问后台的地址
                    data: {statid: obj.value, enable: 1, access_token: config.getToken().access_token,},//前端传递给后台的数据
                    type: 'POST',
                    dataType: 'json',//是后端传递到前端的数据格式
                    success: function (data) {//后端给前端的一个反馈
                        layer.msg('停用成功！')
                    }
                });
            } else {
                $.ajax({
                    url: config.base_server + 'api-administrators/station/updateStatus',//地址：访问后台的地址
                    data: {statid: obj.value, enable: 2, access_token: config.getToken().access_token,},//前端传递给后台的数据
                    type: 'POST',
                    dataType: 'json',//是后端传递到前端的数据格式
                    success: function (data) {//后端给前端的一个反馈
                        layer.msg('启用成功！')
                    }
                });
            }

        });

        //监听状态操作
        form.on('switch(station1)', function (obj) {
            if (obj.othis[0].innerText == '打回') {
                $.ajax({
                    url: config.base_server + 'api-administrators/station/updateStatus',//地址：访问后台的地址
                    data: {statid: obj.value, examin: 1, access_token: config.getToken().access_token,},//前端传递给后台的数据
                    type: 'POST',
                    dataType: 'json',//是后端传递到前端的数据格式
                    success: function (data) {//后端给前端的一个反馈
                        layer.msg('通过成功！')
                    }
                });
            } else {
                $.ajax({
                    url: config.base_server + 'api-administrators/station/updateStatus',//地址：访问后台的地址
                    data: {statid: obj.value, examin: 2, access_token: config.getToken().access_token,},//前端传递给后台的数据
                    type: 'POST',
                    dataType: 'json',//是后端传递到前端的数据格式
                    success: function (data) {//后端给前端的一个反馈
                        layer.msg('打回成功！')
                    }
                });
            }

        });
        // 添加按钮点击事件
        $('#menus-btn-add').click(function () {
            showEditModel();
        });

        // 搜索按钮点击事件
        $('#menus-btn-search').click(function () {
            var keyword = $('#menus-edit-search').val();
            var sttype=$('#sttype').val();
            table.reload('station-table', {where: {stname: keyword,sttype: sttype}});
        });
    });
</script>